<template>
	<view class="page">
		<StatusBar></StatusBar>

		<view class="left-bottom-sign">

		</view>
		<view class="right-top-sign">

		</view>

		<view class="login-box fade-in-left" v-if="model=='login'">
			<view class="left-top-sign">
				LOGIN
			</view>
			<view class="login-head  welcome">欢迎登录</view>
			<view class="input-item bg-gray1">
				<text>手机号</text>

				<input type="number" class="" value="" v-model="formData.phone" placeholder="请输入手机号" />

			</view>
			<!-- <view class="input-item bg-gray1">
				<text>用户名</text>

				<input type="text" class="" value="" v-model="formData.username" placeholder="请输入用户名" />

			</view> -->
			<view class="input-item bg-gray1">
				<text>密码</text>

				<input type="password" class="" value="" v-model="formData.password"
					placeholder="6-18位不含特殊字符的数字、字母组合" />

			</view>

			<view class="input-item ">
				<view class="buttom-input cu-btn round bg-red text-xl" @click="login">
					登录
				</view>

				<view class=" text-blue text-sm text-center margin-top" @click="forget">
					忘记密码？
				</view>
			</view>

			<view class="bottom-text  text-sm text-center margin-top" @click="changeModel">
				还没有账号？<text class="text-blue">马上注册</text>
			</view>

		</view>

		<view class="login-box fade-in-right" v-if="model=='registor'">
			<view class="left-top-sign">
				REGISTER
			</view>
			<view class=" text-bold  text-xxl welcome">欢迎注册</view>

			<view class="input-item bg-gray1">
				<text>用户名</text>

				<input type="text" class="" value="" v-model="regDat.username" placeholder="请输入用户名" />

			</view>
			<view class="input-item bg-gray1">
				<text>设置密码</text>

				<input type="password" class="" value="" v-model="regDat.password" placeholder="6-18位不含特殊字符的数字、字母组合" />

			</view>
			<view class="input-item bg-gray1">
				<text>确认密码</text>

				<input type="password" class="" value="" v-model="regDat.confrom_pass"
					placeholder="6-18位不含特殊字符的数字、字母组合" />

			</view>
			<view class="input-item bg-gray1">
				<text>手机号</text>

				<input type="number" class="" value="" v-model="regDat.phone" placeholder="请输入手机号" />

			</view>
			<view class="input-item bg-gray1">
				<text>邀请码</text>

				<input type="text" class="" value="" v-model="regDat.code" placeholder="请输入邀请码" />

			</view>
			<view class="input-item ">
				<view class="buttom-input cu-btn round bg-red text-xl" @click="login">
					注册
				</view>


			</view>

			<view class="bottom-text  text-sm text-center margin-top" @click="changeModel">
				已有账号？<text class="text-blue">马上登录</text>
			</view>

		</view>

	</view>
</template>

<script>
	import w_md5 from "../../js_sdk/zww-md5/w_md5.js"
	export default {
		components: {
			w_md5
		},
		data() {
			return {
				title: "欢迎登录!",
				model: "login",
				formData: {
					phone: "",
					password: "",
				},
				regDat: {
					username: "",
					password: "",
					confrom_pass: "",
					phone: "",
					code: ""
				}

			}
		},
		methods: {
			changeModel() {
				(this.model == "login") ? (() => {
					this.model = "registor";
				})() : (() => {
					this.model = "login";
				})();
			},
			/**
			 * 忘记密码
			 */
			forget() {
				this.$Reques.showToast("请联系客服");
			},
			/**
			 * 自定义验证登录
			 */
			login() {
				let dat, url;
				(this.model == "login") ? (() => {
					dat = this.formData;
					url = this.$Reques.interface_url.loginApi;
				})() : (() => {
					dat = this.regDat;
					url = this.$Reques.interface_url.register;
				})();
				let d = {};
				for (let u in dat) {
					let isPass = this.verify(u, dat);
					if (!isPass) {
						return false;
					}
					(u != "confrom_pass") ? d[u] = dat[u]: "";
				}

				d.password = w_md5.hex_md5_32(d.password);
				this.$Reques.common(url, "POST", d).then((res) => {
					this.$Reques.showToast(res.message);
					if (res.status == 200) {
						uni.setStorageSync('token',res.data.token);
						uni.setStorage({
							key: 'userData',
							data: res.data,
							success: (res) => {
								
								if(this.model == "login"){
									uni.switchTab({
										url: "/pages/index/index"
									})
								}
								else{
									this.changeModel();
								}
								
								
							}
						})

					}
				})
			},

			/**
			 * 验证表达式
			 */
			verify(...dat) {
				let val = true,
					da = dat[1][dat[0]];
				switch (dat[0]) {
					case "username": //关于username的验证
						if (da.length < 4) {
							this.$Reques.showToast("请输入正确格式的账号");
							val = false;
						}
						break;
					case "password":
						if (da.length < 5) {
							this.$Reques.showToast("请输入正确格式的密码");
							val = false
						}
						break;
					case "confrom_pass":
						if (da != dat[1].password) {
							this.$Reques.showToast("两次输入的密码不一致");
							val = false
						}
						break;
					case "phone":
						if (!RegExp(/^1[3456789]\d{9}$/).test(da)) {
							this.$Reques.showToast("手机号格式错误");
							val = false
						}
						break;
					case "code":
						if (da.length == 0) {
							this.$Reques.showToast("请输入邀请码");
							val = false
						}
						break;

				}
				return val
			}




		}





	}
</script>

<style scoped>
	.page {
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: whtie;
		position: relative;
	}

	.back {
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 50rpx;
	}

	.login-head {
		color: #5A5A5A;
		padding-bottom: 20rpx;
	}

	.login-box {
		width: 90%;
		margin-top: 100rpx;
	}

	.input-item {
		margin: 40rpx auto;
		width: 90%;
		z-index: 999;
		min-height: 100rpx;
		font-size: 30rpx;
		border-radius: 5px;
		padding: 25rpx;
	}

	.bg-gray1 {
		background-color: rgba(231, 235, 237, 0.8);
	}

	.buttom-input {
		width: 90%;
		margin-left: 5%;
	}

	.input-item input {
		height: 60rpx;
		font-size: 30rpx;
	}

	.bottom-text {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.fade-in-left {
		-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	}

	@-webkit-keyframes fade-in-left {
		0% {
			-webkit-transform: translateX(-50px);
			transform: translateX(-50px);
			opacity: 0;
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
			opacity: 1;
		}
	}

	@keyframes fade-in-left {
		0% {
			-webkit-transform: translateX(-50px);
			transform: translateX(-50px);
			opacity: 0;
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
			opacity: 1;
		}
	}

	.fade-in-right {
		-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	}

	@-webkit-keyframes fade-in-right {
		0% {
			-webkit-transform: translateX(50px);
			transform: translateX(50px);
			opacity: 0;
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
			opacity: 1;
		}
	}

	@keyframes fade-in-right {
		0% {
			-webkit-transform: translateX(50px);
			transform: translateX(50px);
			opacity: 0;
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
			opacity: 1;
		}
	}

	.left-bottom-sign {
		position: fixed;
		left: -141px;
		bottom: -167px;
		border: 52px solid #d0d1fd;
		border-radius: 50%;
		padding: 94px;
	}

	.right-top-sign {
		position: fixed;
		top: 41px;
		right: -15px;
		z-index: 0;
	}

	.right-top-sign:before {
		-webkit-transform: rotate(50deg);
		transform: rotate(50deg);
		border-radius: 0 50px 0 0;
	}

	.right-top-sign:after {
		position: absolute;
		right: -103px;
		top: 0;
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
		border-radius: 50px 0 0 0;
	}

	.right-top-sign:before,
	.right-top-sign:after {
		display: block;
		content: "";
		width: 209px;
		height: 41px;
		background: #b4f3e2;
	}

	.left-top-sign {
		font-size: 70rpx;
		color: #F8F8F8;
		position: relative;
		left: -8rpx;




	}

	.welcome {
		position: absolute;
		left: 30rpx;
		top: 20rpx;

		font-size: 40rpx;
		color: #555;
		text-shadow: 1px 0 1px rgba(0, 0, 0, .3);
	}
</style>
